<template>
  <div class="logindetail">
    <div class="jg">
      <div class="text">
        <h1>登陆账号</h1>
        <h4>虾米-严选商城欢迎你</h4>
      </div>
      <div class="inputs">
        <input type="text" v-model="username" placeholder="手机号码" /><br />
        <input type="text" v-model="password" placeholder="密码" /><br />
        <button @click="bingo">登录</button>
      </div>
      <div class="wj">
        <h6>忘记秘密</h6>
        <h3>还没有注册?立即注册</h3>
      </div>
    </div>
  </div>
</template>

<script>
import { getLog } from "../../utils/api";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  mounted() {},
  methods: {
    bingo() {
      getLog(this.username, this.password).then((res) => {
        this.$router.push({ path: "/home" });
        this.$store.commit("settoken", res.data.token);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.logindetail {
  width: 100%;
  height: 10rem;
  .jg {
    width: 90%;
    height: 9rem;
    // background: red;
    border: 1px solid #cccccc;
    margin: auto;
    margin-top: 1rem;
    .text {
      padding-left: 1rem;
      padding-top: 1rem;
      h1 {
        padding-bottom: 0.4rem;
        color: #666;
      }
      h4 {
        color: #909090;
      }
    }
    .inputs {
      text-align: center;
      // padding-left: 1rem;
      input {
        width: 4.7rem;
        height: 0.9rem;
        border-radius: 0.1rem;
        border: none;
        outline: none;
        color: rgb(196, 186, 183);
        background: #f5f5f5;
        margin-top: 0.2rem;
      }
      button {
        margin-top: 0.2rem;
        width: 3rem;
        background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
        outline: none;
        border: none;
        height: 0.8rem;
        color: white;
      }
    }
    .wj {
      text-align: center;
      h6 {
        padding: 0.2rem 0 00.2rem 0;
      }
    }
  }
}
</style>
